<template>
  <div class="blog-slider">
    <div class="blog-slider_wrp swiper-wrapper">

      <!--  登陆界面    -->
      <div class="blog-slider_item swiper-slide" >
        <div class="blog-slider_img">
          <img src="../../public/cat.jpg" alt="">
        </div>
        <div class="blog-slider_content">
          <span class="blog-slider_code">十小时前还在游泳的八戒鸭</span>
          <div class="blog-slider_title">Welcome to DLM</div>
          <el-form ref="form" :model="login" >
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">账号：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="login.username" maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">密码：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="login.password" show-password maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <a href="#" class="blog-slider_button" style="float: right;margin-right: 10px">Cancel</a>
          <a href="#" class="blog-slider_button" @click="loginBth" style="float: right;margin-right: 50px">DownLoad</a>
        </div>
      </div>

      <!--  注册界面    -->
      <div class="blog-slider_item swiper-slide">
        <div class="blog-slider_img">
          <img src="../../public/tortoise.jpg" alt="">
        </div>
        <div class="blog-slider_content">
          <span class="blog-slider_code">十小时前还在游泳的八戒鸭</span>
          <div class="blog-slider_title">Welcome to DLM</div>
          <el-form ref="form" :model="register" >
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">账号：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="register.username" maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">密码：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="register.password" show-password maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">确认密码：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-lock" placeholder="请再次输入密码" v-model="register.confirm" show-password maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <a href="#" class="blog-slider_button" style="float: right;margin-right: 10px">Cancel</a>
          <a href="#" class="blog-slider_button" style="float: right; margin-right: 50px" @click="registerBth">CONFIRM</a>
        </div>
      </div>

    </div>
    <div class="blog-slider_pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import request from "../utils/request";
export default {
  name: "Login",
  data() {
    return {
      login: {

      },
      register: {

      },
      msg:'hello',
    }
  },
  mounted() {
    new Swiper('.blog-slider', {
      spaceBetween: 30,
      effect: 'fade',
      mousewheel: {
        invert: false,
      },

      pagination: {
        el: '.blog-slider_pagination',
        clickable: true,
      }
    });
  },
  methods: {
    loginBth() {
      request.post("/user/login",this.login).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "登录成功"
          })
          sessionStorage.setItem("user",JSON.stringify(res.data));
          console.log(res.data)
          this.$router.push("/")  //登录成功之后进行页面的跳转，跳转到主页
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },
    registerBth() {
      if (this.register.password !== this.register.confirm) {
        this.$message({
          type: "error",
          message: '2次密码输入不一致！'
        })
        return
      }
      request.post("/user/register", this.register).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "注册成功,请登陆账号"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
@import url('../assets/Login.css');
.blog-slider {
  margin-top: 100px;
}
.el-col {
  margin: 0;
  padding: 0;
  height: 30px;
}
</style>